<template>
  <div class="container">
    <div class="left-pane">
      <!-- 左侧内容 -->
      <div style="font-size: 20px; font-weight: bold; padding: 10px;">属性分类</div>
      <div class="client-attribute">
        <el-button class="attribute" :class="{ active: activeTab === 'client-attribute' }"
          @click="setActiveTab('client-attribute')">客户属性</el-button>
      </div>
      <div class="item-attribute">
        <el-button class="attribute" :class="{ active: activeTab === 'item-attribute' }"
          @click="setActiveTab('item-attribute')">物品属性</el-button>
      </div>
    </div>
    <hr class="vertical-line">
    <div class="right-pane">
      <div style="display: flex; justify-content: space-between; align-items: center;">
        <div>
          属性值列表
        </div>
      </div>
      <div class="container-query">
        <div v-if="activeTab === 'client-attribute'">
          <div class="right-but">
            <el-button class="add-button" @click="clientAddModal">新增属性值</el-button>
          </div>
          <div>
            <el-table :data="clientData" border style="width: 100%" class="centered-table">
              <el-table-column prop="dd_sort" label="序号"></el-table-column>
              <el-table-column prop="dd_label" label="值名称"></el-table-column>
              <el-table-column label="操作">
                <template slot-scope="scope">
                  <el-button size="mini" type="primary" icon="el-icon-edit"
                    @click="editClient(scope.row)">修改</el-button>
                  <el-button size="mini" type="danger" icon="el-icon-delete"
                    @click="deleteClient(scope.row.dd_code)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <!-- 分页 -->
          <el-pagination class="pagination" @size-change="change1" @current-change="Ymchange1"
            :current-page="currentPage1" :page-sizes="[5, 10, 20, 50]" :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper" :total="rows1">
          </el-pagination>
        </div>
        <!-- 客户添加模态框 -->
        <el-dialog title="添加" :visible.sync="isAddclientVisible" width="400px" :close-on-click-modal="false" class="qw">
          <el-form :model="clientform" label-width="100px">
            <el-form-item label="值名称">
              <el-input v-model="clientform.dd_label" autocomplete="off" placeholder="值名称"
                style="width: 230px;"></el-input>
            </el-form-item>

          </el-form>
          <div>
            <span slot="footer" style="display: flex; justify-content: center;">
              <el-button @click="isAddclientVisible = false"
                style="margin-right: 20px; background-color: #4FC1B0; border-color: #4FC1B0; color: #fff;">取消</el-button>
              <el-button type="primary" @click="clientsubmitForm"
                style="margin-left: 20px; background-color: #4FC1B0; border-color: #4FC1B0; color: #fff;">确定</el-button>
            </span>
          </div>
        </el-dialog>
        <!-- 客户修改模态框 -->
        <el-dialog title="修改" :visible.sync="isEditClientVisible" width="400px" :close-on-click-modal="false"
          class="qw">
          <el-form :model="editClientForm" label-width="100px">
            <el-form-item label="客户编号">
              <el-input v-model="editClientForm.dd_code" autocomplete="off" placeholder="客户编号" disabled
                style="width: 230px;"></el-input>
            </el-form-item>
            <el-form-item label="值名称">
              <el-input v-model="editClientForm.dd_label" autocomplete="off" placeholder="值名称"
                style="width: 230px;"></el-input>
            </el-form-item>

          </el-form>
          <div>
            <span slot="footer" style="display: flex; justify-content: center;">
              <el-button @click="isEditClientVisible = false"
                style="margin-right: 20px; background-color: #4FC1B0; border-color: #4FC1B0; color: #fff;">取消</el-button>
              <el-button type="primary" @click="updateClient"
                style="margin-left: 20px; background-color: #4FC1B0; border-color: #4FC1B0; color: #fff;">修改</el-button>
            </span>
          </div>
        </el-dialog>
        <div v-if="activeTab === 'item-attribute'">
          <!-- 显示新增物品按钮 -->
          <div class="right-but">
            <el-button class="add-button" @click="itemAddModal">新增属性值</el-button>
          </div>
          <!--物品查询-->
          <div>
            <el-table :data="goodsData" style="width: 100%" class="centered-table">
              <el-table-column prop="dd_sort" label="序号"></el-table-column>
              <el-table-column prop="dd_label" label="值名称"></el-table-column>
              <el-table-column label="操作">
                <template slot-scope="scope">
                  <el-button size="mini" type="primary" icon="el-icon-edit" @click="editItem(scope.row)">修改</el-button>
                  <el-button size="mini" type="danger" icon="el-icon-delete"
                    @click="deleteItem(scope.row.dd_code)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <!-- 分页 -->
          <el-pagination class="pagination" @size-change="change2" @current-change="Ymchange2"
            :current-page="currentPage2" :page-sizes="[5, 10, 20, 50]" :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper" :total="rows2">
          </el-pagination>
        </div>
        <!-- 物品添加模态框 -->
        <el-dialog title="添加" :visible.sync="isAdditemVisible" width="400px" :close-on-click-modal="false" class="qw">
          <el-form :model="itemform" label-width="100px">
            <el-form-item label="值名称">
              <el-input v-model="itemform.dd_label" autocomplete="off" placeholder="值名称"
                style="width: 230px;"></el-input>
            </el-form-item>
          </el-form>
          <div>
            <span slot="footer" style="display: flex; justify-content: center;">
              <el-button @click="isAdditemVisible = false"
                style="margin-right: 20px; background-color: #4FC1B0; border-color: #4FC1B0; color: #fff;">取消</el-button>
              <el-button type="primary" @click="itemsubmitForm"
                style="margin-left: 20px; background-color: #4FC1B0; border-color: #4FC1B0; color: #fff;">确定</el-button>
            </span>
          </div>
        </el-dialog>
        <!-- 物品修改模态框 -->
        <el-dialog title="修改" :visible.sync="isEditItemVisible" width="400px" :close-on-click-modal="false" class="qw">
          <el-form :model="editItemForm" label-width="100px">
            <el-form-item label="客户编号">
              <el-input v-model="editItemForm.dd_code" autocomplete="off" placeholder="客户编号" disabled
                style="width: 230px;"></el-input>
            </el-form-item>
            <el-form-item label="值名称">
              <el-input v-model="editItemForm.dd_label" autocomplete="off" placeholder="值名称"
                style="width: 230px;"></el-input>
            </el-form-item>

          </el-form>
          <div>
            <span slot="footer" style="display: flex; justify-content: center;">
              <el-button @click="isEditItemVisible = false"
                style="margin-right: 20px; background-color: #4FC1B0; border-color: #4FC1B0; color: #fff;">取消</el-button>
              <el-button type="primary" @click="updateItem"
                style="margin-left: 20px; background-color: #4FC1B0; border-color: #4FC1B0; color: #fff;">修改</el-button>
            </span>
          </div>
        </el-dialog>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios';
import { format } from 'date-fns';
import { MessageBox } from 'element-ui';
import $http from '@/routers/base';
export default {
  data() {
    return {
      activeTab: 'client-attribute',
      username: localStorage.getItem('username'),
      clientData: [],//客户查询
      goodsData: [],//物品查询
      isAddclientVisible: false,//添加客户模态框
      isAdditemVisible: false,//添加物品模态框
      isEditClientVisible: false,//修改客户模态框
      isEditItemVisible: false,//修改物品模态框
      currentPage1: 1, //当前页
      currentPage2: 1, //当前页
      pageSize: 5, //每页显示数
      rows1: 0, //总行数
      rows2: 0,

      clientform: {
        dd_label: "",
        dd_sort: 0,
      },
      itemform: {
        dd_label: "",

      },
      editClientForm: {
        dd_code: '',
        dd_label: "",
      },
      editItemForm: {
        dd_code: '',
        dd_label: "",
      }

    }
  },
  methods: {
    setActiveTab(tab) {
      this.activeTab = tab;
    },
    showAddModal() {
      // 实现显示新增模态框的逻辑
      console.log('显示新增模态框');
    },
    //查询客户
    async clientsData() {
      const response = await $http.get('dict_data/Queryclient');
      this.clientData = response

    },
    //分页
    clientsData() {
      this.where = "dd_type='type_client'";
      // 向后端请求数据，并更新客户数据和总条数
      $http.get('dict_data/getClientFenYe', {
        params: {
          currentPage: this.currentPage1,
          pageSize: this.pageSize,
          where: this.where
        }
      }).then(res => {
        this.clientData = res.clientData;
        this.rows1 = res.rows;
      }).catch(error => {
        console.error('Error fetching client data: ', error);
      });
    },
    change1: function (size) {
      this.pageSize = size;
      this.currentPage1 = 1;
      this.clientsData();
    },
    Ymchange1: function (page) {
      this.currentPage1 = page;
      this.clientsData();
    },
    //查询物品
    async goodssData() {
      const response = await $http.get('dict_data/Querygoods');
      this.goodsData = response

    },
    //分页
    goodssData() {
      this.where = "dd_type='type_goods'";
      // 向后端请求数据，并更新客户数据和总条数
      $http.get('dict_data/getGoodsFenYe', {
        params: {
          currentPage: this.currentPage2,
          pageSize: this.pageSize,
          where: this.where
        }
      }).then(res => {
        this.goodsData = res.goodsData;
        this.rows2 = res.rows;
      }).catch(error => {
        console.error('Error fetching client data: ', error);
      });
    },
    change2: function (size) {
      this.pageSize = size;
      this.currentPage2 = 1;
      this.goodssData();
    },
    Ymchange2: function (page) {
      this.currentPage2 = page;
      this.goodssData();
    },

    //客户添加
    async clientsubmitForm() {

      if (this.submitclientForm()) {
        $http.post('dict_data/clientAdd', {
          "dd_label": this.clientform.dd_label,
          "dd_type": "type_client",
          "dd_sort": this.clientform.dd_sort,
          "dd_create_by": this.username,
          "dd_create_time": format(new Date(), 'yyyy-MM-dd'),
          "dd_update_by": null,
          "dd_update_time": null,
          "dd_remark": "默认",
          "isDeleted": false
        }).then(response => {
          if (response) {
            this.isAddclientVisible = false;
            this.clientsData();
            this.$message.success('添加成功！');
            this.clientform.dd_label = '';
          } else {
            console.log('新增客户数据：', response);
          }
        }).catch(error => {
          this.$message.error('添加失败：' + error.message);

        })
      }
    },
    //物品添加
    async itemsubmitForm() {
      if (this.submititemForm()) {
        $http.post('dict_data/goodsAdd', {
          "dd_label": this.itemform.dd_label,
          "dd_type": "type_goods",
          "dd_sort": 0,
          "dd_create_by": this.username,
          "dd_create_time": format(new Date(), 'yyyy-MM-dd'),
          "dd_update_by": null,
          "dd_update_time": null,
          "dd_remark": "默认",
          "isDeleted": false
        }).then(response => {
          if (response) {
            this.isAdditemVisible = false;
            this.goodssData();
            this.$message.success('添加成功！');
            this.itemform.dd_label = '';
          } else {
            console.log('新增客户数据：', response.data);
          }
        }).catch(error => {
          this.$message.error('添加失败：' + error.message);

        })
      }
    },
    //获取数据
    editClient(row) {
      this.$set(this.editClientForm, 'dd_code', row.dd_code);
      this.$set(this.editClientForm, 'dd_label', row.dd_label);
      this.$set(this.editClientForm, 'dd_type', row.dd_type);
      this.$set(this.editClientForm, 'dd_sort', row.dd_sort);
      this.$set(this.editClientForm, 'dd_create_by', row.dd_create_by);
      this.$set(this.editClientForm, 'dd_create_time', row.dd_create_time);
      this.$set(this.editClientForm, 'dd_remark', row.dd_remark);
      this.$set(this.editClientForm, 'isDeleted', row.isDeleted);

      // 设置修改人和修改时间字段
      this.$set(this.editClientForm, 'dd_update_by', this.username);
      //npm install date-fns

      const formattedDate = format(new Date(), 'yyyy-MM-dd');
      this.$set(this.editClientForm, 'dd_update_time', formattedDate);
      this.isEditClientVisible = true;
    },
    //客户修改
    async updateClient() {
      if (this.ClientEditForm()) {
        $http.put('dict_data/clientUpdate', this.editClientForm)
          .then(response => {
            if (response) {
              this.$message.success('修改成功！');
              this.isEditClientVisible = false;
              this.clientsData();

            } else {
              this.$message.error('修改失败！请重试！');
            }
          }).catch(error => {
            this.$message.error('修改失败：' + error.message);
          })
      }
    },
    editItem(row) {
      console.log(row)
      this.$set(this.editItemForm, 'dd_code', row.dd_code);
      this.$set(this.editItemForm, 'dd_label', row.dd_label);
      this.$set(this.editItemForm, 'dd_type', row.dd_type);
      this.$set(this.editItemForm, 'dd_sort', row.dd_sort);
      this.$set(this.editItemForm, 'dd_create_by', row.dd_create_by);
      this.$set(this.editItemForm, 'dd_create_time', row.dd_create_time);
      this.$set(this.editItemForm, 'dd_remark', row.dd_remark);
      this.$set(this.editItemForm, 'isDeleted', row.isDeleted);
      // 设置修改人和修改时间字段
      this.$set(this.editItemForm, 'dd_update_by', this.username);
      //npm install date-fns
      const formattedDate = format(new Date(), 'yyyy-MM-dd');
      this.$set(this.editItemForm, 'dd_update_time', formattedDate);
      this.isEditItemVisible = true;
    },
    //物品修改
    async updateItem() {
      if (this.ItemEditForm()) {
        $http.put('dict_data/goodsUpdate', this.editItemForm)
          .then(response => {
            if (response) {
              this.$message.success('修改成功！');
              this.isEditItemVisible = false;
              this.goodssData();
            } else {
              this.$message.error('修改失败！请重试！');
            }
          }).catch(error => {
            this.$message.error('修改失败：' + error.message);
          })
      }
    },
    //客户逻辑删除
    async deleteClient(dd_code) {
      console.log(dd_code)
      MessageBox.confirm('确认删除删除该条记录吗？, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        axios.delete(`https://localhost:7018/api/dict_data/clientDelete/${dd_code}`)
          .then(() => {
            this.$message({
              type: 'success',
              message: '删除成功！'
            })
            this.clientsData();
          }).catch(error => {
            this.$message.error('删除失败：' + error.message)
          })
      })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '管理员取消了删除,删除无效哦！'
          })
        })
    },
    //物品逻辑删除
    async deleteItem(dd_code) {
      console.log(dd_code)
      MessageBox.confirm('确认删除删除该条记录吗？, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        $http.delete(`dict_data/goodsDelete/${dd_code}`)
          .then(() => {
            this.$message({
              type: 'success',
              message: '删除成功！'
            })
            this.goodssData();
          }).catch(error => {
            this.$message.error('删除失败：' + error.message)
          })
      })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '管理员取消了删除,删除无效哦！'
          })
        })
    },
    //添加客户按钮
    clientAddModal() {
      this.isAddclientVisible = true;
    },
    //添加物品按钮
    itemAddModal() {
      this.isAdditemVisible = true;
    },
    //客户非空判断
    submitclientForm() {
      if (this.clientform.dd_label.trim() === '') {
        this.$message.error('值名称不能为空！');
        return false;
      }
      return true;
    },
    //物品非空判断
    submititemForm() {
      if (this.itemform.dd_label.trim() === '') {
        this.$message.error('值名称不能为空！');
        return false;
      }
      return true;
    },
    //客户修改非空判断
    ClientEditForm() {
      if (this.editClientForm.dd_label.trim() === '') {
        this.$message.error('值名称不能为空！');
        return false;
      }
    
      return true;
    },
    //物品修改非空判断
    ItemEditForm() {
      if (this.editItemForm.dd_label.trim() === '') {
        this.$message.error('值名称不能为空！');
        return false;
      }
      return true;
    }
  },
  mounted() {
    this.clientsData();
    this.goodssData();

  },
}
</script>

<style scoped>
.container {
  display: flex;

}

.left-pane {
  flex: 15%;
}

.right-pane {
  flex: 85%;
  /* 自动扩展填充剩余空间 */
  padding: 10px;
}

.vertical-line {
  border-left: 2px solid black;
  /* 设置边框为黑色，粗细为2px */
  height: 700px;
  /* 设置竖线的高度 */
  margin: 20px;
  /* 可根据需要调整竖线与其他内容的间距 */
}

.right-but {
  float: right;
  bottom: 0;
  right: 100px;
}

.add-button {
  background-color: #4FC1B0;
  color: #ffffff
}

.add-button:hover {
  background-color: #ecf5ff;
  /* 鼠标悬停时的背景色 */
  color: #409EFF;
  /*鼠标悬停时字体颜色*/
  border-color: #c6e2ff;
}

.client-attribute {
  width: 150px;
}

.item-attribute {
  width: 150px;
}

.attribute {
  width: 100%;
  padding: 15px;
  margin: 10px -10px 5px 10px;
  background-color: rgba(252, 252, 252, 1);
  color: #999999;
}

.attribute:hover {
  color: rgb(26, 188, 156);
  background-color: #ffffff;
}

.attribute:focus {
  color: #FFFFFF;
  background-color: #1ABC9C;
}

.container-query {
  margin: 20px;
}
</style>